<template>
  <div class="fire">
    <div class="val-box">
      <div class="even">
        <h3>当前燃料顶负荷能力（MW）</h3>
        <p>{{ loaderData.max_load }}</p>
      </div>
      <div class="even">
        <h3>煤质变化剩余时间(min)</h3>
        <p>{{ loaderData.countdown }}</p>
      </div>
      <!-- <div class="even">
        <h3>收到基水分（%）</h3>
        <p>{{ coalAnalysisData.water }}</p>
      </div>
      <div class="even">
        <h3>收到基灰分（%）</h3>
        <p>{{ coalAnalysisData.ash }}</p>
      </div> -->
      <div class="even">
        <h3>收到基硫分（%）</h3>
        <p>{{ coalAnalysisData.sulfur }}</p>
      </div>
      <div class="even">
        <h3>收到基发热量（kcal/kg）</h3>
        <p>{{ coalAnalysisData.caloric_value }}</p>
      </div>
    </div>
    <div id="td"></div>
  </div>
</template>
<script setup>
import { onMounted, reactive, toRefs } from "vue";
import { initThree, render, initBunkerData } from "../assets/js/threeObj";
import { initFuel } from "../http/api.js";
const data = reactive({
  source: undefined,
  loaderData: [],
  coalAnalysisData: [],
  bunkerData: [],
});
const { source, loaderData, coalAnalysisData, bunkerData } = toRefs(data);
onMounted(() => {
  initThree("td");
  render();
  getInitFuel();
  longLink();
});
function getInitFuel() {
  initFuel().then((res) => {
    loaderData.value = res.load_data;
    coalAnalysisData.value = res.coal_analysis_data;
    bunkerData.value = res.bunker_data;
  });
}
function longLink() {
  if (window.EventSource) {
    source.value = new EventSource(
      "http://121.41.120.212:8080/combustion_monitor/fuel/realtime"
    );
    source.value.onopen = function (event) {};

    source.value.addEventListener(
      "load_data",
      (event) => {
        let data = eval("(" + event.data + ")");
        loaderData.value = data;
      },
      false
    );
    source.value.addEventListener(
      "coal_analysis_data",
      (event) => {
        let data = eval("(" + event.data + ")");
        coalAnalysisData.value = data;
      },
      false
    );
    source.value.addEventListener(
      "bunker_data",
      (event) => {
        let data = eval("(" + event.data + ")");

        bunkerData.value = data;
        initBunkerData(data);
      },
      false
    );
    source.value.onerror = function (event) {
      source.value.close();
      longLink();
    };
  }
}
</script>
<style lang="scss">
.fire {
  height: 100%;
  #td {
    width: 100%;
    height: calc(100% - 5.52vw);
  }
  .val-box {
    display: flex;
    justify-content: center;
    .even {
      height: 5.52vw;
      width: 12vw;
      margin: 0 2vh;
      background: url("../assets/img/val_bg.png") center center no-repeat;
      background-size: 100% 100%;
      h3 {
        text-align: center;
        color: #fff;
        font-size: 1.5vh;
        height: 2.5vw;
        line-height: 2.5vw;
        margin: 0;
      }
      p {
        margin: 0;
        text-align: center;
        font-size: 3.5vh;
        color: #eaeffc;
        text-shadow: 0 0 0.8vh #0ba1d4, 0 0 0.2vh #fff, 0 0 0.2vh #fff,
          0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4,
          0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4;
        font-weight: 700;
      }
    }
  }
}
</style>
<style lang="scss">
.model-label {
  background: url("../assets/img/label.png") center center no-repeat;
  background-size: 100% 100%;
  color: #fff;
  padding: 1vh 2vh 1.2vh 2vh;
  .name {
    color: #eaeffc;
    text-shadow: 0 0 0.8vh #0ba1d4, 0 0 0.2vh #fff, 0 0 0.2vh #fff,
      0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4,
      0 0 0.8vh #0ba1d4;
    text-align: center;
    font-size: 1.2vh;
    margin-bottom: 1vh;
  }
  .weight,
  .thing,
  .time {
    font-size: 1.1vh;
    margin-bottom: 0.5vh;
    span {
      font-weight: 700;
    }
  }
}
</style>
